<template>
  <div class="add">
    <Headers>
      <template #left>
        ⟨
      </template>
      <template #center>
        新增发票抬头
      </template>
      <template #right>
        <span @click="add(ruleForm)">保存</span>
      </template>
    </Headers>
    <div>
      <van-form @submit="onSubmit(ruleForm)">
        <van-cell-group inset>
          <van-field name="type" label="抬头类型" v-model="ruleForm.type">
            <template #input>
              <van-tabs v-model:active="active" v-for="(item,index) in typeValue"  @click-tab="tab(index)">
                <van-tab :title="item"></van-tab>
              </van-tabs>
            </template>
          </van-field>
          <van-field v-model="ruleForm.name" name="name" label="抬头名称" placeholder="必填，公司名称"
            :rules="[{ required: true, message: '请填写公司名称' }]" />
            <van-field v-model="ruleForm.number" name="number" label="税号" placeholder="必填，纳税人识别号"
            :rules="[{ required: true, message: '请填写税号' }]"/>
            <van-field v-model="ruleForm.email" name="email" label="邮箱" placeholder="请填写常用邮箱（选填）"/>
          <van-field name="special" label="需要增值税专用发票">
            <template #input>
              <van-switch v-model="ruleForm.special" />
            </template>
          </van-field>
          <van-field name="default" label="设置为默认发票">
            <template #input>
              <van-switch v-model="ruleForm.defaults" />
            </template>
          </van-field>
          <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">提交</van-button>
            </div>
        </van-cell-group>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import Headers from '@/components/Headers.vue';
import { ref, reactive,onMounted } from 'vue';
import { getAdd, getList, getUpd } from '../api/index';
import { useRoute } from 'vue-router';
let active = ref(0)
let route=useRoute();
let {data}=route.query;
let arr=JSON.parse(data as any)
console.log(arr);
let list=ref()
onMounted(()=>{
    onList()
})
let onList=async()=>{
    let data=await getList();
    list.value=data
}
let typeValue=ref(["企业","非企业个人","个人"])
let ruleForm = reactive({
  id:null,
  type: '',
  name: '',
  number: '',
  email: '',
  special: null,
  defaults: null,
});
const add = async (obj:Object) => {
    await getAdd(obj);
    ruleForm.name='';
    ruleForm.number='';
    ruleForm.email='';
};
let tab=(ind:number)=>{
  active.value=ind
  console.log(active.value);
  active.value==0?ruleForm.type="企业":active.value==1?ruleForm.type="非企业个人":"个人"
}
let onSubmit=async(obj:any)=>{
  console.log(1111);
  ruleForm=obj
  await getUpd(obj);
  onList()
}
</script>

<style lang="scss">
.van-tab{
  color: #999;
  border: none;
  width: 70px;
  height: 30px;
  line-height: 30px;
}
.van-tabs__line{
  display: none;
}
.van-tab--active {
    color: rgb(34, 190, 255);
    border: 1px solid rgb(34, 190, 255);
    background-color: #fff;
}
</style>
